
<template>
    <div>
        <div class="radius-container">
            <div class="border-b pad-10 font-w font-15 flex topbar-style">
              <label class="flex-item ">任务类型</label>
              <label class="font-normal pad-r-10">{{oneCategoryName }}<span class="font-blue pad-l-10" @click="updateTaskType">修改</span></label>
            </div>
            <div class="pad-20">
                <el-form :model="form" label-width="100px" :rules="rules" ref="form">
                  <el-select v-model="form.twoCategoryId" placeholder="请选择" prop="twoCategoryId">
                    <el-option v-for="item in twoCategorys"
                      :key="item.categoryId"
                      :label="item.categoryName"
                      :value="item.categoryId">
                    </el-option>
                  </el-select>
                </el-form>
            </div>
        </div>
        <!-- 选择一级类目弹窗 -->
        <task-category></task-category>
    </div>

</template>


<script>
  import { getCategoryList, getOneCategory, getEditTaskType } from '@/api/project/taskInfo'
  import taskCategory from '@/views/project/task/components/task-category'

  export default {
    props: ['categoryId', 'taskId'],
    components: { taskCategory },
    data() {
      return {
        // taskId: null,
        form: {
          taskType: '1',
          oneCategoryId: '',
          twoCategoryId: ''
        },
        // 任务类目tab
        oneCategoryName: '',
        rules: {
          taskType: [
            { required: true, message: '请输入任务模式', trigger: 'blur' }
          ],
          twoCategoryId: [
            { required: true, message: '请选择分类', trigger: 'blur' }
          ]
        },
        dict: {},
        taskCategoryShow: false,
        // 任务类型本地数据
        taskCategory: [],
        // 二级类目集合
        twoCategorys: []
      }
    },
    // 初始化页面
    created() {
      console.log('taskType')
    },
    mounted() {
      const that = this
      // 初始化数据
      this.busListener()
      if (this.categoryId) {
        this.form.oneCategoryId = this.categoryId
        this.initCategoryTypes()
        this.initOneCategoryName()
      }
      if (this.$utils.isExist(this.taskId)) {
        this.getEditData()
      }
      // 监听数据字典
      this.$bus.$on('task.edit.dict', function(data) {
        that.dict = data
      })
    },
    methods: {
      getEditData() {
        const taskId = this.taskId
        var data = {
          taskId: taskId
        }
        getEditTaskType(data).then(response => {
          this.form.oneCategoryId = response.data.oneCategoryId
          this.form.twoCategoryId = response.data.twoCategoryId
          this.form.taskType = response.data.taskType + ''
          this.initCategoryTypes()
          this.changeTaskType(this.form.taskType)
          this.$bus.$emit('project.task.edit.taskInfoCategory.categoryId', response.data.oneCategoryId)
          this.initOneCategoryName()
        })
      },
      // 获取类目名称
      initOneCategoryName() {
        const oneCategoryId = this.form.oneCategoryId
        getOneCategory(oneCategoryId).then(response => {
          const oneCategoryName = response.data.categoryName
          this.form.oneCategoryId = response.data.categoryId
          this.oneCategoryName = oneCategoryName
        })
      },
      busListener() {
        const that = this
        // 选择类目后
        this.$bus.$on('project.task.components.task-category-edit', function(category) {
          that.oneCategoryName = category.categoryName
          that.form.oneCategoryId = category.categoryId
          that.form.twoCategoryId = ''
          that.initCategoryTypes()
        })
      },
      updateTaskType() {
        this.$bus.$emit('project.task.edit.taskInfoCategory.show', 'edit')
      },
      // 初始化类目
      initCategoryTypes() {
        if (this.form.oneCategoryId === null) {
          return
        }
        const that = this
        getCategoryList(this.form.oneCategoryId).then(response => {
          if (response.hasError) {
            return
          }
          const twoCategoryList = response.data
          if (twoCategoryList.length === 0) {
            return
          }
          that.twoCategorys = twoCategoryList
        })
      },
      // 修改任务类型
      changeTaskType(e) {
        this.$bus.$emit('project.task.edit.taskType', e)
      },
      checkForm() {
        let ret = true
        if (!this.$utils.isExist(this.form.twoCategoryId)) {
          this.$message({
            message: '请选择二级分类',
            type: 'error'
          })
          ret = false
        }
        return ret
      }
    }

  }
</script>


<style scoped lang="less">

    .el-input{
        width:20%
    }
    .width-100{
        width: 100%;
    }
    .select-cag-btn{
        padding: 0 15px!important;
        width: 32%;
        height: 36px!important;
        line-height: 36px!important;
        position: relative;
        .el-icon-arrow-down{
            position: absolute;
            top: 50%;
            margin-top: -6px;
            right: 8px;
        }
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .main-transfer {
        width: 200px;
    }

    .main-transfer-title {
        background-color: #f5f7fa;
        height: 40px;
        font-size: 16px;
        padding-left: 20px;
    }

    .main-transfer-list {
        height: 260px;
        overflow-y: scroll;
    }
    .task-type-bar{
        position: relative;
    }
    .task-category{
        position: absolute;
        left: 0px;
        top: 25px;
        z-index: 8;
        padding: 0;
        box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
        color: #606266;
        >li{
            list-style: none;
            &.on>span{
                background: #fff;
                border-right: #fff 1px solid;
                font-weight: bolder;
            }
            >span{
                background: #f4f4f4;
                width: 120px;
                display: block;
                height: 50px;
                text-align: center;
                line-height: 50px;
                font-size: 14px;
                border-left: #ccc 1px solid;
                border-right: #ccc 1px solid;
                border-top: #ccc 1px solid;
                position: relative;
                z-index: 13;
                cursor: pointer;
                &:hover{
                    background: #fff;
                    border-right: #fff 1px solid;
                }
            }
            &:last-child{
                >span{
                    border-bottom: #ccc 1px solid;
                }
            }
            >ul{
                position: absolute;
                left: 120px;
                top: 0px;
                background: #fff;
                width: 600px;
                height: 100%;
                // min-height: 200px;
                text-align: left;
                list-style: none;
                padding: 20px 20px;
                z-index: 10;
                border-top: #ccc 1px solid;
                border-bottom: #ccc 1px solid;
                border-right: #ccc 1px solid;
                box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
                &:after{
                    content: '';
                    position: relative;
                    width: 1px;
                    height: 200px;
                    background: #ccc;
                    left: 0;
                    top: 0;
                    z-index: 2;
                }
                >li{
                    margin-right: 15px;
                    font-size: 12px;
                    display: block;
                    margin-bottom: 5px;
                    float: left;
                    cursor: pointer;
                    padding: 6px;
                    line-height: 1.3;
                    &:hover{
                        background: #ffecdf;
                        color: #eb2626;
                    }
                }
            }
        }
    }
</style>
